<!DOCTYPE html>
<html lang="en" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>Code Syntax Guide | Kyle&#39;s Blog</title>
<meta name="keywords" content="markdown, syntax, code, gist">
<meta name="description" content="Sample article showcasing basic code syntax and formatting for HTML elements.">
<meta name="author" content="Aditya Telange">
<link rel="canonical" href="https://pagesorg.atomgit.net/atomgit-blog/posts/code_syntax/">
<link crossorigin="anonymous" href="/atomgit-blog/assets/css/stylesheet.5ff2630c4d1b3e25bc21f0ecd96681dbcf58219e741fa627857820b5485cb770.css" integrity="sha256-X/JjDE0bPiW8IfDs2WaB289YIZ50H6YnhXggtUhct3A=" rel="preload stylesheet" as="style">
<link rel="icon" href="https://pagesorg.atomgit.net/atomgit-blog/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="https://pagesorg.atomgit.net/atomgit-blog/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://pagesorg.atomgit.net/atomgit-blog/favicon-32x32.png">
<link rel="apple-touch-icon" href="https://pagesorg.atomgit.net/atomgit-blog/apple-touch-icon.png">
<link rel="mask-icon" href="https://pagesorg.atomgit.net/atomgit-blog/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<link rel="alternate" hreflang="en" href="https://pagesorg.atomgit.net/atomgit-blog/posts/code_syntax/">
<noscript>
    <style>
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: rgb(29, 30, 32);
                --entry: rgb(46, 46, 51);
                --primary: rgb(218, 218, 219);
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
                --code-block-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>
  

<meta property="og:title" content="Code Syntax Guide" />
<meta property="og:description" content="Sample article showcasing basic code syntax and formatting for HTML elements." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://pagesorg.atomgit.net/atomgit-blog/posts/code_syntax/" />
<meta property="og:image" content="https://pagesorg.atomgit.net/atomgit-blog/images/papermod-cover.png" />
<meta property="article:section" content="posts" />
<meta property="article:published_time" content="2019-03-10T00:00:00+00:00" />
<meta property="article:modified_time" content="2019-03-10T00:00:00+00:00" />



<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://pagesorg.atomgit.net/atomgit-blog/images/papermod-cover.png" />
<meta name="twitter:title" content="Code Syntax Guide"/>
<meta name="twitter:description" content="Sample article showcasing basic code syntax and formatting for HTML elements."/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position":  1 ,
      "name": "Posts",
      "item": "https://pagesorg.atomgit.net/atomgit-blog/posts/"
    }, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "Code Syntax Guide",
      "item": "https://pagesorg.atomgit.net/atomgit-blog/posts/code_syntax/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Code Syntax Guide",
  "name": "Code Syntax Guide",
  "description": "Sample article showcasing basic code syntax and formatting for HTML elements.",
  "keywords": [
    "markdown", "syntax", "code", "gist"
  ],
  "articleBody": "Inline Code This is Inline Code\nOnly pre This is pre text Code block with backticks \u003c!DOCTYPE html\u003e Example HTML5 Document Test\nCode block with backticks and language specified \u003c!DOCTYPE html\u003e \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charset=\"utf-8\" /\u003e \u003ctitle\u003eExample HTML5 Document\u003c/title\u003e \u003cmeta name=\"description\" content=\"Sample article showcasing basic Markdown syntax and formatting for HTML elements.\" /\u003e \u003c/head\u003e \u003cbody\u003e \u003cp\u003eTest\u003c/p\u003e \u003c/body\u003e \u003c/html\u003e Code block with backticks and language specified with line numbers 1 2 3 4 5 6 7 8 9 10 11 12 13 14 \u003c!DOCTYPE html\u003e \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charset=\"utf-8\" /\u003e \u003ctitle\u003eExample HTML5 Document\u003c/title\u003e \u003cmeta name=\"description\" content=\"Sample article showcasing basic Markdown syntax and formatting for HTML elements.\" /\u003e \u003c/head\u003e \u003cbody\u003e \u003cp\u003eTest\u003c/p\u003e \u003c/body\u003e \u003c/html\u003e Code block with line numbers and highlighted lines PaperMod supports linenos=true or linenos=table 1 2 3 4 5 6 7 8 9 10 11 12 13 14 \u003c!DOCTYPE html\u003e \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charset=\"utf-8\" /\u003e \u003ctitle\u003eExample HTML5 Document\u003c/title\u003e \u003cmeta name=\"description\" content=\"Sample article showcasing basic Markdown syntax and formatting for HTML elements.\" /\u003e \u003c/head\u003e \u003cbody\u003e \u003cp\u003eTest\u003c/p\u003e \u003c/body\u003e \u003c/html\u003e With linenos=inline line might not get highlighted properly. This issue is fixed with 045c084 1\u003c!DOCTYPE html\u003e 2\u003chtml lang=\"en\"\u003e 3 \u003chead\u003e 4 \u003cmeta charset=\"utf-8\" /\u003e 5 \u003ctitle\u003eExample HTML5 Document\u003c/title\u003e 6 \u003cmeta 7 name=\"description\" 8 content=\"Sample article showcasing basic Markdown syntax and formatting for HTML elements.\" 9 /\u003e 10 \u003c/head\u003e 11 \u003cbody\u003e 12 \u003cp\u003eTest\u003c/p\u003e 13 \u003c/body\u003e 14\u003c/html\u003e Code block indented with four spaces \u003c!doctype html\u003e Example HTML5 Document Test\nCode block with Hugo’s internal highlight shortcode \u003c!doctype html\u003e \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charset=\"utf-8\"\u003e \u003ctitle\u003eExample HTML5 Document\u003c/title\u003e \u003c/head\u003e \u003cbody\u003e \u003cp\u003eTest\u003c/p\u003e \u003c/body\u003e \u003c/html\u003e Github Gist ",
  "wordCount" : "294",
  "inLanguage": "en",
  "image": "https://pagesorg.atomgit.net/atomgit-blog/images/papermod-cover.png","datePublished": "2019-03-10T00:00:00Z",
  "dateModified": "2019-03-10T00:00:00Z",
  "author":[{
    "@type": "Person",
    "name": "Aditya Telange"
  }],
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://pagesorg.atomgit.net/atomgit-blog/posts/code_syntax/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Kyle's Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://pagesorg.atomgit.net/atomgit-blog/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="https://pagesorg.atomgit.net/atomgit-blog/" accesskey="h" title="Kyle&#39;s Blog (Alt + H)">Kyle&#39;s Blog</a>
            <div class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
                <ul class="lang-switch"><li>|</li>
                    <li>
                        <a href="https://pagesorg.atomgit.net/atomgit-blog/fr/" title="French"
                            aria-label=":fr:">🇫🇷</a>
                    </li>
                    <li>
                        <a href="https://pagesorg.atomgit.net/atomgit-blog/fa/" title="Fa"
                            aria-label="Fa">Fa</a>
                    </li>
                </ul>
            </div>
        </div>
        <ul id="menu">
            <li>
                <a href="https://pagesorg.atomgit.net/atomgit-blog/archives" title="Archive">
                    <span>Archive</span>
                </a>
            </li>
            <li>
                <a href="https://pagesorg.atomgit.net/atomgit-blog/search/" title="Search (Alt &#43; /)" accesskey=/>
                    <span>Search</span>
                </a>
            </li>
            <li>
                <a href="https://pagesorg.atomgit.net/atomgit-blog/tags/" title="Tags">
                    <span>Tags</span>
                </a>
            </li>
            <li>
                <a href="https://github.com/adityatelange/hugo-PaperMod/wiki/" title="WiKi">
                    <span>WiKi</span>&nbsp;
                    <svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12">
                        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
                        <path d="M15 3h6v6"></path>
                        <path d="M10 14L21 3"></path>
                    </svg>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    <div class="breadcrumbs"><a href="https://pagesorg.atomgit.net/atomgit-blog/">Home</a>&nbsp;»&nbsp;<a href="https://pagesorg.atomgit.net/atomgit-blog/posts/">Posts</a></div>
    <h1 class="post-title entry-hint-parent">
      Code Syntax Guide
    </h1>
    <div class="post-description">
      Sample article showcasing basic code syntax and formatting for HTML elements.
    </div>
    <div class="post-meta"><span title='2019-03-10 00:00:00 +0000 UTC'>March 10, 2019</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Aditya Telange&nbsp;|&nbsp;<a href="https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/content/posts/code_syntax.md" rel="noopener noreferrer" target="_blank">Suggest Changes</a>

</div>
  </header> <div class="toc">
    <details  open>
        <summary accesskey="c" title="(Alt + C)">
            <span class="details">Table of Contents</span>
        </summary>

        <div class="inner"><ul>
                <li>
                    <a href="#inline-code" aria-label="Inline Code">Inline Code</a></li>
                <li>
                    <a href="#only-pre" aria-label="Only pre">Only pre</a></li>
                <li>
                    <a href="#code-block-with-backticks" aria-label="Code block with backticks">Code block with backticks</a></li>
                <li>
                    <a href="#code-block-with-backticks-and-language-specified" aria-label="Code block with backticks and language specified">Code block with backticks and language specified</a></li>
                <li>
                    <a href="#code-block-with-backticks-and-language-specified-with-line-numbers" aria-label="Code block with backticks and language specified with line numbers">Code block with backticks and language specified with line numbers</a></li>
                <li>
                    <a href="#code-block-with-line-numbers-and-markhighlightedmark-lines" aria-label="Code block with line numbers and highlighted lines">Code block with line numbers and highlighted lines</a></li>
                <li>
                    <a href="#code-block-indented-with-four-spaces" aria-label="Code block indented with four spaces">Code block indented with four spaces</a></li>
                <li>
                    <a href="#code-block-with-hugos-internal-highlight-shortcode" aria-label="Code block with Hugo&rsquo;s internal highlight shortcode">Code block with Hugo&rsquo;s internal highlight shortcode</a></li>
                <li>
                    <a href="#github-gist" aria-label="Github Gist">Github Gist</a>
                </li>
            </ul>
        </div>
    </details>
</div>

  <div class="post-content"><h3 id="inline-code">Inline Code<a hidden class="anchor" aria-hidden="true" href="#inline-code">#</a></h3>
<p><code>This is Inline Code</code></p>
<h3 id="only-pre">Only <code>pre</code><a hidden class="anchor" aria-hidden="true" href="#only-pre">#</a></h3>
<pre>
This is pre text
</pre>
<h3 id="code-block-with-backticks">Code block with backticks<a hidden class="anchor" aria-hidden="true" href="#code-block-with-backticks">#</a></h3>
<pre tabindex="0"><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&#34;en&#34;&gt;
  &lt;head&gt;
    &lt;meta charset=&#34;utf-8&#34; /&gt;
    &lt;title&gt;Example HTML5 Document&lt;/title&gt;
    &lt;meta
      name=&#34;description&#34;
      content=&#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.&#34;
    /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Test&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre><h3 id="code-block-with-backticks-and-language-specified">Code block with backticks and language specified<a hidden class="anchor" aria-hidden="true" href="#code-block-with-backticks-and-language-specified">#</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Example HTML5 Document<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span>
</span></span><span class="line"><span class="cl">      <span class="na">name</span><span class="o">=</span><span class="s">&#34;description&#34;</span>
</span></span><span class="line"><span class="cl">      <span class="na">content</span><span class="o">=</span><span class="s">&#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Test<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</span></span></code></pre></div><h3 id="code-block-with-backticks-and-language-specified-with-line-numbers">Code block with backticks and language specified with line numbers<a hidden class="anchor" aria-hidden="true" href="#code-block-with-backticks-and-language-specified-with-line-numbers">#</a></h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Example HTML5 Document<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span>
</span></span><span class="line"><span class="cl">      <span class="na">name</span><span class="o">=</span><span class="s">&#34;description&#34;</span>
</span></span><span class="line"><span class="cl">      <span class="na">content</span><span class="o">=</span><span class="s">&#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Test<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h3 id="code-block-with-line-numbers-and-markhighlightedmark-lines">Code block with line numbers and <mark>highlighted</mark> lines<a hidden class="anchor" aria-hidden="true" href="#code-block-with-line-numbers-and-markhighlightedmark-lines">#</a></h3>
<ul>
<li>PaperMod supports <code>linenos=true</code> or <code>linenos=table</code></li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="hl"><span class="lnt"> 2
</span></span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="hl"><span class="lnt"> 8
</span></span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span></span><span class="line hl"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Example HTML5 Document<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span>
</span></span><span class="line"><span class="cl">      <span class="na">name</span><span class="o">=</span><span class="s">&#34;description&#34;</span>
</span></span><span class="line hl"><span class="cl">      <span class="na">content</span><span class="o">=</span><span class="s">&#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Test<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><ul>
<li><del>With <code>linenos=inline</code> line <mark><strong>might not</strong> get highlighted</mark> properly.<del></li>
<li>This issue is fixed with <a href="https://github.com/adityatelange/hugo-PaperMod/commit/045c08496d61b1b3f9c79e69e7d3d243a526d8f3">045c084</a></li>
</ul>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="ln"> 1</span><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span></span><span class="line hl"><span class="ln"> 2</span><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="ln"> 3</span><span class="cl">  <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="ln"> 4</span><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="ln"> 5</span><span class="cl">    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Example HTML5 Document<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="ln"> 6</span><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span>
</span></span><span class="line"><span class="ln"> 7</span><span class="cl">      <span class="na">name</span><span class="o">=</span><span class="s">&#34;description&#34;</span>
</span></span><span class="line hl"><span class="ln"> 8</span><span class="cl">      <span class="na">content</span><span class="o">=</span><span class="s">&#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.&#34;</span>
</span></span><span class="line"><span class="ln"> 9</span><span class="cl">    <span class="p">/&gt;</span>
</span></span><span class="line"><span class="ln">10</span><span class="cl">  <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="ln">11</span><span class="cl">  <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="ln">12</span><span class="cl">    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Test<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="ln">13</span><span class="cl">  <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="ln">14</span><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</span></span></code></pre></div><h3 id="code-block-indented-with-four-spaces">Code block indented with four spaces<a hidden class="anchor" aria-hidden="true" href="#code-block-indented-with-four-spaces">#</a></h3>
<pre><code>&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;Example HTML5 Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;Test&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="code-block-with-hugos-internal-highlight-shortcode">Code block with Hugo&rsquo;s internal highlight shortcode<a hidden class="anchor" aria-hidden="true" href="#code-block-with-hugos-internal-highlight-shortcode">#</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!doctype html&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Example HTML5 Document<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Test<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></span></span></code></pre></div>
<h3 id="github-gist">Github Gist<a hidden class="anchor" aria-hidden="true" href="#github-gist">#</a></h3>
<script src="https://gist.github.com/adityatelange/376cd56ee2c94aaa2e8b93200f2ba8b5.js"></script>



  </div>

  <footer class="post-footer">
    <ul class="post-tags">
      <li><a href="https://pagesorg.atomgit.net/atomgit-blog/tags/markdown/">Markdown</a></li>
      <li><a href="https://pagesorg.atomgit.net/atomgit-blog/tags/syntax/">Syntax</a></li>
      <li><a href="https://pagesorg.atomgit.net/atomgit-blog/tags/code/">Code</a></li>
      <li><a href="https://pagesorg.atomgit.net/atomgit-blog/tags/gist/">Gist</a></li>
    </ul>
<nav class="paginav">
  <a class="prev" href="https://pagesorg.atomgit.net/atomgit-blog/posts/markdown-syntax/">
    <span class="title">« Prev</span>
    <br>
    <span>Markdown Syntax Guide</span>
  </a>
  <a class="next" href="https://pagesorg.atomgit.net/atomgit-blog/posts/rich-content/">
    <span class="title">Next »</span>
    <br>
    <span>Rich Content and Shortcodes</span>
  </a>
</nav>


<ul class="share-buttons">
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Code Syntax Guide on x"
            href="https://x.com/intent/tweet/?text=Code%20Syntax%20Guide&amp;url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fcode_syntax%2f&amp;hashtags=markdown%2csyntax%2ccode%2cgist">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M512 62.554 L 512 449.446 C 512 483.97 483.97 512 449.446 512 L 62.554 512 C 28.03 512 0 483.97 0 449.446 L 0 62.554 C 0 28.03 28.029 0 62.554 0 L 449.446 0 C 483.971 0 512 28.03 512 62.554 Z M 269.951 190.75 L 182.567 75.216 L 56 75.216 L 207.216 272.95 L 63.9 436.783 L 125.266 436.783 L 235.9 310.383 L 332.567 436.783 L 456 436.783 L 298.367 228.367 L 432.367 75.216 L 371.033 75.216 Z M 127.633 110 L 164.101 110 L 383.481 400.065 L 349.5 400.065 Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Code Syntax Guide on linkedin"
            href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fcode_syntax%2f&amp;title=Code%20Syntax%20Guide&amp;summary=Code%20Syntax%20Guide&amp;source=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fcode_syntax%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Code Syntax Guide on reddit"
            href="https://reddit.com/submit?url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fcode_syntax%2f&title=Code%20Syntax%20Guide">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-3.446,265.638c0,-22.964 -18.616,-41.58 -41.58,-41.58c-11.211,0 -21.361,4.457 -28.841,11.666c-28.424,-20.508 -67.586,-33.757 -111.204,-35.278l18.941,-89.121l61.884,13.157c0.756,15.734 13.642,28.29 29.56,28.29c16.407,0 29.706,-13.299 29.706,-29.701c0,-16.403 -13.299,-29.702 -29.706,-29.702c-11.666,0 -21.657,6.792 -26.515,16.578l-69.105,-14.69c-1.922,-0.418 -3.939,-0.042 -5.585,1.036c-1.658,1.073 -2.811,2.761 -3.224,4.686l-21.152,99.438c-44.258,1.228 -84.046,14.494 -112.837,35.232c-7.468,-7.164 -17.589,-11.591 -28.757,-11.591c-22.965,0 -41.585,18.616 -41.585,41.58c0,16.896 10.095,31.41 24.568,37.918c-0.639,4.135 -0.99,8.328 -0.99,12.576c0,63.977 74.469,115.836 166.33,115.836c91.861,0 166.334,-51.859 166.334,-115.836c0,-4.218 -0.347,-8.387 -0.977,-12.493c14.564,-6.47 24.735,-21.034 24.735,-38.001Zm-119.474,108.193c-20.27,20.241 -59.115,21.816 -70.534,21.816c-11.428,0 -50.277,-1.575 -70.522,-21.82c-3.007,-3.008 -3.007,-7.882 0,-10.889c3.003,-2.999 7.882,-3.003 10.885,0c12.777,12.781 40.11,17.317 59.637,17.317c19.522,0 46.86,-4.536 59.657,-17.321c3.016,-2.999 7.886,-2.995 10.885,0.008c3.008,3.011 3.003,7.882 -0.008,10.889Zm-5.23,-48.781c-16.373,0 -29.701,-13.324 -29.701,-29.698c0,-16.381 13.328,-29.714 29.701,-29.714c16.378,0 29.706,13.333 29.706,29.714c0,16.374 -13.328,29.698 -29.706,29.698Zm-160.386,-29.702c0,-16.381 13.328,-29.71 29.714,-29.71c16.369,0 29.689,13.329 29.689,29.71c0,16.373 -13.32,29.693 -29.689,29.693c-16.386,0 -29.714,-13.32 -29.714,-29.693Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Code Syntax Guide on facebook"
            href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fcode_syntax%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Code Syntax Guide on whatsapp"
            href="https://api.whatsapp.com/send?text=Code%20Syntax%20Guide%20-%20https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fcode_syntax%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-58.673,127.703c-33.842,-33.881 -78.847,-52.548 -126.798,-52.568c-98.799,0 -179.21,80.405 -179.249,179.234c-0.013,31.593 8.241,62.428 23.927,89.612l-25.429,92.884l95.021,-24.925c26.181,14.28 55.659,21.807 85.658,21.816l0.074,0c98.789,0 179.206,-80.413 179.247,-179.243c0.018,-47.895 -18.61,-92.93 -52.451,-126.81Zm-126.797,275.782l-0.06,0c-26.734,-0.01 -52.954,-7.193 -75.828,-20.767l-5.441,-3.229l-56.386,14.792l15.05,-54.977l-3.542,-5.637c-14.913,-23.72 -22.791,-51.136 -22.779,-79.287c0.033,-82.142 66.867,-148.971 149.046,-148.971c39.793,0.014 77.199,15.531 105.329,43.692c28.128,28.16 43.609,65.592 43.594,105.4c-0.034,82.149 -66.866,148.983 -148.983,148.984Zm81.721,-111.581c-4.479,-2.242 -26.499,-13.075 -30.604,-14.571c-4.105,-1.495 -7.091,-2.241 -10.077,2.241c-2.986,4.483 -11.569,14.572 -14.182,17.562c-2.612,2.988 -5.225,3.364 -9.703,1.12c-4.479,-2.241 -18.91,-6.97 -36.017,-22.23c-13.314,-11.876 -22.304,-26.542 -24.916,-31.026c-2.612,-4.484 -0.279,-6.908 1.963,-9.14c2.016,-2.007 4.48,-5.232 6.719,-7.847c2.24,-2.615 2.986,-4.484 4.479,-7.472c1.493,-2.99 0.747,-5.604 -0.374,-7.846c-1.119,-2.241 -10.077,-24.288 -13.809,-33.256c-3.635,-8.733 -7.327,-7.55 -10.077,-7.688c-2.609,-0.13 -5.598,-0.158 -8.583,-0.158c-2.986,0 -7.839,1.121 -11.944,5.604c-4.105,4.484 -15.675,15.32 -15.675,37.364c0,22.046 16.048,43.342 18.287,46.332c2.24,2.99 31.582,48.227 76.511,67.627c10.685,4.615 19.028,7.371 25.533,9.434c10.728,3.41 20.492,2.929 28.209,1.775c8.605,-1.285 26.499,-10.833 30.231,-21.295c3.732,-10.464 3.732,-19.431 2.612,-21.298c-1.119,-1.869 -4.105,-2.99 -8.583,-5.232Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Code Syntax Guide on telegram"
            href="https://telegram.me/share/url?text=Code%20Syntax%20Guide&amp;url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fcode_syntax%2f">
            <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28" height="30px" width="30px" fill="currentColor">
                <path
                    d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Code Syntax Guide on ycombinator"
            href="https://news.ycombinator.com/submitlink?t=Code%20Syntax%20Guide&u=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fcode_syntax%2f">
            <svg version="1.1" xml:space="preserve" width="30px" height="30px" viewBox="0 0 512 512" fill="currentColor"
                xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
                <path
                    d="M449.446 0C483.971 0 512 28.03 512 62.554L512 449.446C512 483.97 483.97 512 449.446 512L62.554 512C28.03 512 0 483.97 0 449.446L0 62.554C0 28.03 28.029 0 62.554 0L449.446 0ZM183.8767 87.9921H121.8427L230.6673 292.4508V424.0079H281.3328V292.4508L390.1575 87.9921H328.1233L256 238.2489z" />
            </svg>
        </a>
    </li>
</ul>

  </footer>
</article>
    </main>
    
<footer class="footer">
        <span>© <a href="https://atomgit.com/kyle">Kyle</a></span> · 

    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a>

<script>
    let menu = document.getElementById('menu')
    if (menu) {
        menu.scrollLeft = localStorage.getItem("menu-scroll-position");
        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerHTML = 'copy';

        function copyingDone() {
            copybutton.innerHTML = 'copied!';
            setTimeout(() => {
                copybutton.innerHTML = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>
</body>

</html>
